<template>
  <div class="container">
    <el-form :model="addinfo" :rules="rules" ref="addForm">
      <div class="search-top">
        <el-form-item class="search-item" prop="code" label="货品编码"><el-input :disabled="addinfo.code!==''" v-model="addinfo.code"/></el-form-item>
        <el-form-item class="search-item" prop="goodsTypeName" label="货品类型">
              <el-autocomplete style="width:100%" class="inline-input" v-model="addinfo.goodsTypeName" :fetch-suggestions="goodsTypequerySearch" placeholder="请输入内容" :trigger-on-focus="false"  suffix-icon="el-icon-search"/>
          </el-form-item>
        <el-form-item class="search-item" prop="name" label="货品名称"><el-input v-model="addinfo.name" placeholder="请输入"/></el-form-item>
        <el-form-item class="search-item" prop="barCode" label="货品条码"><el-input v-model="addinfo.barCode" placeholder="请输入"/></el-form-item>
      </div>
      <div class="sec search-top">
        <el-form-item class="search-item" prop="ownerName" label="货主">
           <el-autocomplete style="width:100%" class="inline-input" v-model="addinfo.ownerName" :fetch-suggestions="goodsOwnerquerySearch" placeholder="请输入内容" :trigger-on-focus="false"  suffix-icon="el-icon-search"/>
          </el-form-item>
        <el-form-item class="search-item" prop="inspectionType"  label="质检方式">
        <el-select placeholder="请选择" v-model="addinfo.inspectionType" style="width:100%">
          <el-option v-for="item,index in inspectionType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" prop="temperatureType" label="温度要求">
        <el-select  placeholder="请选择" v-model="addinfo.temperatureType" style="width:100%">
          <el-option v-for="item,index in temperatureType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" prop="bearingType" label="承重要求">
        <el-select  placeholder="请选择" v-model="addinfo.bearingType" style="width:100%">
          <el-option v-for="item,index in bearingType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
      </div>
      <div class="third search-top">
        <el-form-item class="search-item" prop="volume" label="体积">
          <el-input v-model="addinfo.volume" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>m³</span></i>
          </el-input>
        </el-form-item>
        <el-form-item class="search-item" prop="bearingType" label="指定库区">
        <el-select  placeholder="请选择" v-model="addinfo.bearingType" style="width:100%">
          <el-option  value="" />
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" label="单价">
          <el-input v-model="addinfo.price" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>元</span></i>
          </el-input>
        </el-form-item>
        <el-form-item class="search-item" prop="name" label="单位"><el-input v-model="addinfo.unit" placeholder="请输入内容"/></el-form-item>
      </div>
      <div class="down search-down search-top">
        <el-form-item class="search-item" prop="guaranteeDay" label="质保天数">
          <el-input v-model="addinfo.guaranteeDay" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>天</span></i>
          </el-input>
        </el-form-item>
      </div>
      <div class="Btn">
        <el-button class="btn1" @click="backFn">返回</el-button>
        <el-button class="btn2" @click="submit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getCode, getgoodstype, getownername, add, detail, put } from '@/api/goods'

export default {
  name: 'goods-add',
  async created () {
    const { data: goodsType } = await getgoodstype()// 获得货品类型
    this.goodstype = goodsType.map(i => ({ id: i.goodsTypeId, value: i.name }))
    console.log('货品类型listthis.goodstype====>', this.goodstype)

    const { data: goodsownerName } = await getownername()// 获得货主名单
    this.goodsownername = goodsownerName.map(i => ({ value: i.name, id: i.id }))
    console.log('货主listthis.goodsownername====>', this.goodsownername)

    console.log('路由传参id', this.$route.query.id)
    if (this.$route.query.id) {
      console.log(this.$route.query)
      const { data: detailinfo } = await detail(this.$route.query.id)
      console.log('根据路由id请求到的数据', detailinfo)
      console.log('本地的原始数据', this.addinfo)
      this.addinfo = detailinfo
      // Object.keys(this.addinfo).forEach(key => (this.addinfo[key] = detailinfo[key]))
      this.$set(this.addinfo, 'goodsTypeName', this.$route.query.goodsTypeName)
      this.$set(this.addinfo, 'ownerName', this.$route.query.ownerName)
      // this.addinfo.goodsTypeName = this.$route.query.goodsTypeName
      // this.addinfo.ownerName = this.$route.query.ownerName
      console.log('处理之后的回显数据', this.addinfo)
    } else {
      const { data: code } = await getCode()
      this.addinfo.code = code
    }
  },
  mounted () {
    // console.log(this.$refs.areainfo111)
  },
  data () {
    return {
      goodstype: [], // 存放第二格的数据
      goodsownername: [], // 存放货主列表
      temperatureType: [{ // 温度类型
        value: 'CW',
        label: '常温'
      }, {
        value: 'LC',
        label: '冷藏'
      }, {
        value: 'HW',
        label: '恒温'
      }],
      useType: [{ // 使用类型
        value: 'RKHCQ',
        label: '入库缓存区'
      }, {
        value: 'CKHCQ',
        label: '出库缓存区'
      }, {
        value: 'CCQ',
        label: '存储区'
      }, {
        value: 'FJQ',
        label: '分拣区'
      }, {
        value: 'ZJQ',
        label: '质检区'
      }],
      bearingType: [{ // 承重类型
        value: 'ZX',
        label: '重型'
      }, {
        value: 'QX',
        label: '轻型'
      }, {
        value: 'BX',
        label: '中型'
      }],
      inspectionType: [{ // 存放质质检方式
        label: '不处理', value: 'BCL'
      },
      { label: '全检', value: 'QJ' },
      { label: '抽检', value: 'CJ' }],
      addinfo: { // add的data
        code: '', // 货品编码
        areaId: '', // 库区id
        barCode: '', // 条码
        bearingType: '', // 承重
        goodsTypeId: '', // 货品类型ID
        goodsTypeName: '', // 货品类型名称
        guaranteeDay: '', // 质保天数
        inspectionType: '', // 质检方式 不处理:BCL、全检:QJ、抽检:C
        name: '', // 名称
        ownerId: '', // 货主id
        ownerName: '', // 货主名称
        price: '', // 单价
        temperatureType: '', // 温度
        unit: '', // 单位
        volume: '' // 体积
      },
      rules: { // 表单校验规则
        code: [{ required: true, message: '必填' }],
        goodsTypeName: [{ required: true, message: '必填' }],
        name: [{ required: true, message: '必填' }],
        barCode: [{ required: true, message: '必填' }],
        ownerName: [{ required: true, message: '必填' }],
        inspectionType: [{ required: true, message: '必填' }],
        temperatureType: [{ required: true, message: '必填' }],
        bearingType: [{ required: true, message: '必填' }],
        volume: [{ required: true, message: '必填' }]
      }
    }
  },
  methods: {
    async submit () {
      try {
        if (this.$route.query.id) {
          await this.$refs.addForm.validate()
          await put(this.addinfo)
          this.$message.success('更新成功')
        } else {
          await this.$refs.addForm.validate()
          await add(this.addinfo)
          this.$message.success('新增成功')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.addinfo = { // 清除form内容
          code: '', // 货品编码
          areaId: '', // 库区id
          barCode: '', // 条码
          bearingType: '', // 承重
          goodsTypeId: '', // 货品类型ID
          goodsTypeName: '', // 货品类型名称
          guaranteeDay: '', // 质保天数
          inspectionType: '', // 质检方式 不处理:BCL、全检:QJ、抽检:C
          name: '', // 名称
          ownerId: '', // 货主id
          ownerName: '', // 货主名称
          price: '', // 单价
          temperatureType: '', // 温度
          unit: '', // 单位
          volume: '' // 体积
        }
        // this.seeyou = '请输入'
        this.$refs.addForm.resetFields()
        console.log(1)
        this.backFn()
      }
    },
    backFn () {
      this.$router.push('/layout/goods')
    },
    choosechange (a) {
      console.log('当选中节点变化时触发', a)
    },
    goodsTypequerySearch (string, cb) { // 货品类型返回建议
      const res = this.goodstype.filter(i => (i.value.includes(string)) || i.id.includes(string)) || this.goodstype
      console.log('匹配到的货品类型列表res====>', res)
      cb(res)
    },
    goodsOwnerquerySearch (string, cb) { // 货主返回建议
      console.log('所有的货主列表this.goodsownername====>', this.goodsownername)
      const res = this.goodsownername.filter(i => (i.value.includes(string)) || i.id.includes(string)) || this.goodsownername
      console.log('匹配到的货品类型列表res====>', res)
      cb(res)
    }

  },
  watch: {
    'addinfo.goodsTypeName' (a, b) {
      this.$nextTick(() => {
        console.log('货品类型list====>', this.goodsTypeName)
        this.addinfo.goodsTypeId = this.goodstype.filter(i => i.value === a)[0]?.id
      })
    },
    'addinfo.ownerName' (a, b) {
      this.$nextTick(() => {
        console.log('货主listthis.ownerName====>', this.ownerName)
        this.addinfo.ownerId = this.goodsownername.filter(i => i.value === a)[0]?.id
      })
    }
  }

}
</script>

<style lang="less" scoped>
.seeyou{
  ::-webkit-input-placeholder{
    color: rgb(8, 8, 8);
  }
}
.container{
 min-width: 100%;
 height: 509px;
//  margin: 0 30px;
 padding: 30px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 3px 3px  10px gray;
 /deep/.search-top{
  display: flex;
   justify-content: space-between;
 }
 /deep/.search-second{
  display: flex;
  .search-item{
    width:24%;
    margin-right: 1.5%;
  }
  .el-radio.is-focus{
      color: orange;
    }
      .el-radio__inner:hover{
        border: 1px solid orange !important;
      }
      .el-radio__inner{
        border: 1px solid rgb(214, 213, 212) !important;
      }
        .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
           border-color: orange;
           background: orange;
        }
         .el-radio.is-checked .el-radio__label {
           color:orange ;
        }
 }
  /deep/.search-item{
    .el-form-item__label{
    text-align: left;
    }
    display: flex;
    flex-direction: column;
    width: 24% !important;
    height: 68px;
    margin-top: 5px;
    // background-color: #fff;
    .el-input__inner{
      background-color: #f3ebebd4!important;
      border:unset !important;
      border-radius: 5px!important;
    }
    .el-input__inner:hover{
      border:1px solid rgb(122, 121, 121) !important;
    }
    .el-input__inner:focus{
      border:1px solid orange!important;
    }
  }
  /deep/.search-down{
    display: flex;
    justify-content: flex-start;
    .search-item{
      width: 24%;
      margin-right: 1.5%;
    }
    .pailieceng,.changkuangao{
      width: 50% !important;
      .el-form-item__content{
        display: flex;
        justify-content: flex-start;
        .el-input{
          width: 30%;
          margin-right:7% ;
        }
      }
    }
  }
  // .down{
  //   justify-content: space-between !important;
  // }
  // /deep/.search-third{
  //   display: flex;
  //   justify-content: space-between;
  //   .search-item.radio-item{
  //     .el-form-item__content{
  //       display: flex;
  //       // align-items: center;
  //     }
  //   }

  //   .el-radio.is-focus{
  //     color: orange;
  //   }
  //     .el-radio__inner:hover{
  //       border: 1px solid orange !important;
  //     }
  //     .el-radio__inner{
  //       border: 1px solid rgb(214, 213, 212) !important;
  //     }
  //       .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
  //          border-color: orange;
  //          background: orange;
  //       }
  //        .el-radio.is-checked .el-radio__label {
  //          color:orange ;
  //       }
  // }
  .Btn{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .el-button{
      width: 170px;
      height: 40px;
      border-radius: 30px;
      border: none;
    }
    .btn1{
      background-color: #f8f5f5;
    }
    .btn1:hover{
      background-color: #ffb200;
      color: black;
    }
    .btn2{
      background-color: #ffb200;
    }
    .btn2:hover{
      background-color: #cb7504;
      color: black;

    }
  }
  .el-popper.el-cascader__dropdown.abc .el-cascader-node:hover{
    color: #e31d26 !important;
    font-weight: 700 !important;
}
}

</style>
